<template>
  <div>
    <div v-if="isWelcome">
      <p class="welcome">点击卡片登录</p>
      <div class="welcome_container" @click="welcome">
        <div class="text">
            <a href="#">欢迎进入敏宝の前端小窝</a>
            <h2>yingzi</h2>
            <span>I am very happy to meet you <br/>at this moment! !</span>
        </div>
        <div class="column">
            <!-- --i是用来计算平面圆柱的动效延迟和距离的
            --w则是用来计算平面圆柱的宽度 -->
            <div class="column_list" style="--i:1;--w:1.5"></div>
            <div class="column_list" style="--i:2;--w:1.6"></div>
            <div class="column_list" style="--i:3;--w:1.4"></div>
            <div class="column_list" style="--i:4;--w:1.7"></div>
            <div class="column_last" style="--i:1"></div>
        </div>
    </div>
    </div>
    <Login v-else />
  </div>
</template>

<script>
import Login from "../../pages/Login";
export default {
  name: "Welcome",
  components: { Login },
  data() {
    return {
      isWelcome: true,
    };
  },
  methods: {
    welcome() { 
      this.isWelcome = false;
    },
  },
};
</script>

<style lang="less" scoped>
.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  font-size: 32px;
  height: 60px;
  width: 400px;
  margin-top: 100px;
  margin-bottom: -100px;
  // 设置好看的字体样式
  font-family: STXingkai;
  text-decoration: none;
  background-image: -webkit-linear-gradient(right, #e95e1e, #4876f5, #0b9fb9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome_container {
  position: relative;
  overflow: hidden;
  margin: auto;
  width: 800px;
  height: 400px;
  border: #fff 10px solid;
  background-color: rgb(120, 140, 200);
  top: 120px;
  border-radius: 20px;
  overflow: hidden;
  .text {
    position: absolute;
    width: 350px;
    height: 300px;
    left: 0;
    margin: 55px 50px;
    transition: 1s;
    a {
      display: inline-block;
      width: 350px;
      text-decoration: none;
      color: #fff;
      font: 900 28px "";
    }
    h2 {
      /* 鼠标放开时的动画，第一个值是动画的过渡时间
            第二个值是延迟一秒后执行动画 */
      transition: 0.5s 1s;
      opacity: 0;
      color: rgba(30, 210, 200, 0.4);
    }
    span {
      transition: 0.5s 1s;
      color: #fff;
      font: 500 22px "";
      position: absolute;
      top: 70px;
    }
  }
  .column {
    position: absolute;
    top: -130px;
    right: -240px;
    .column_list,
    .column_last {
      position: absolute;
      right: calc(var(--i) * 100px);
      width: calc(var(--w) * 40px);
      height: 500px;
      overflow: hidden;
      border-radius: 100px;
      transform: rotateZ(220deg) translate(0, 0);
      background: rgb(240, 220, 150);
      transition: 0.5s 0.5s;
    }
    .column_list:nth-child(2) {
      background: rgb(240, 190, 230);
    }
    .column_last {
      left: -470px;
      top: -140px;
      width: 70px;
      background-color: rgb(90, 220, 150);
    }
  }
}
// 鼠标移入的样式
.welcome_container:hover .column div {
  /* 设置延迟动画 */
  transition: 0.5s calc(var(--i) * 0.1s);
  /* 移动的轨迹 */
  transform: rotateZ(220deg) translate(-200px, 400px);
}
.welcome_container:hover .text {
  transition: 1s 0.5s;
  left: 370px;
}
.welcome_container:hover .text span {
  transition: 1s 0.5s;
  top: 105px;
}
.welcome_container:hover .text h2 {
  transition: 1s 0.5s;
  opacity: 1;
}
</style>